<template>
    <view class="content">
        <van-popup position="bottom" @click-overlay="onCloseActions" :show="showPopup" round z-index=100 
            custom-style="width: 100%;background:#ffffff;overflow: hidden;">
            <view class="popup-content">
                <view class="popup-main">
                    <view style="display: flex; justify-content: space-between;">
                        <view class="popupTitle"> 更多操作 </view>
                        <!-- 关闭弹窗按钮 -->
                        <view> <van-icon name="cross" size="15" @click="onCloseActions" /> </view>
                    </view>

                    <scroll-view :refresher-enabled="false" style="height: 100%; overflow: hidden;" scroll-y
                        :lower-threshold="80" show-scrollbar="false">

                        <!-- <van-cell-group>
                            <van-cell title="转上门" is-link @click="handleTransfer"  title-style="color: #ff4757;" />
                            <van-cell title="取消入库" is-link @click="handleCancel" title-style="color: #999;" />
                        </van-cell-group> -->
                        <view class="actionsWrapper">
                            <van-list >
                                <block v-for="(item, index) in action" :key="index" >
                                    <view class="actionItem" :class="{'noBorder':index == action.length -1,'item_selected': current === index}" @click="selectAction(index,item)">{{item.name}}</view>
                                </block>
                            </van-list>
                        </view>
                    </scroll-view>
                    <van-toast id="van-toast" />
                </view>
                <view class="confirm-button">
                    <van-button block type="primary" @click="handleConfirm">确定</van-button>
                </view>
            </view>
        </van-popup>
    </view>
</template>
<script>
import Toast from '@/wxcomponents/vant/toast/toast'
export default {
    props: {
        showPopup: {
            type: Boolean,
            default: () => false
        },
        action: {
            type: Array,
            default: () => ''
        },
        packageInfo: {
            type: Object,
            default: () => {}
        }

    },
    data () {
        return {
            current:-1,
            date: '',
            show: true,
            title: 'Hello',
            handleType:'cancel', // 处理类型 cancel-取消入库 transfer-转上门

        }
    },
    onReady () {

    },
    methods: {
        // 关闭弹窗
        onCloseActions () {
            this.$emit('onCloseActions')
        },
        // 选择操作
        selectAction(index,item){
            this.current = index
            // 判断选中的哪一个操作 并进行处理
            this.handleSelectedActions(index,item.name)
        },

        // 
        handleSelectedActions(index,name){
            switch (name) {
                case '转上门':
                    // this.handleTransfer()
                    this.handleType = 'transfer'
                    break;
                case '取消入库':
                    this.handleType = 'cancel'
                    // this.handleCancel()
                    break;
                default:
                    break;
            }
        },
        // handleTransfer() {
        //     // 转上门业务逻辑
        //     console.log('执行转上门操作')
        // },
        // handleCancel() {
        //     // 取消入库业务逻辑
        //     console.log('执行取消入库操作')
        // },
        // 确定按钮
        handleConfirm() {
            // 确定按钮业务逻辑
            console.log('执行确定操作')
            this.onCloseActions()
            if(this.handleType === 'transfer'){
                // 转上门
                this.$emit('onConfirmTransfer',this.handleType,this.packageInfo)
            }else if(this.handleType === 'cancel'){
                this.$emit('onConfirmCancel',this.handleType,this.packageInfo)
            }
        }
    }
}
</script>
<style lang="scss" scoped>
// @import '@/styles/variables.scss';

.popup-content{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height:100%;
    overflow: hidden;
    padding: 24px;
    border-radius: 16px;
}
// 滚动
.scroll-content {
    flex: 1;
    height:1px;
    // height: 100vh;
}
// 提示框
.popup-main{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    height: 100%;

    .popupTitle{
        font-size: 20px;
        text-align: left;
        color: #111111;
        line-height: 20px;
    }

    .actionsWrapper{
        margin-top: 66rpx;
        border-top:1rpx solid #e6e6e6;
        border-bottom: 1rpx solid #e6e6e6;
    }
    .actionItem{
        width: 100%;
        padding-top: 34rpx;
        padding-bottom: 34rpx;
        text-align: center;
        border-bottom: 1rpx solid #e6e6e6;
        font-size: 28rpx;
        color: #666666;
    }
    .noBorder{
        border: none;
    }
    .item_selected{
        font-size: 32rpx;

        color: #ff6203;
    }
    // 加入购物车按钮
    .goodsAction {
        margin-top: 24px;
        width: calc(100% - 32px);
    }

}

.confirm-button {
  padding: 20rpx;
}

.l20 {
    margin-left: 20px;
}

.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}
.t31{
    margin-top: 31px;
}
</style>

